<template>
  <div class="login">
    <!-- 头部标题 -->
    <van-nav-bar>
      <template #left>
        <i class="iconfont iconbtn_nav_back" @click="$router.go(-1)"></i>
      </template>
    </van-nav-bar>
    <h2>你好，请登录</h2>
    <!-- 手机号和验证码 -->
    <van-form @submit="onSubmit">
      <!-- @submit="onSubmit" -->
      <van-cell>
        <van-field
          :rules="rules.mobile"
          placeholder="请输入手机号"
          v-model="user.mobile"
        >
          <!-- v-model="user.mobile" -->
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <van-field
          :rules="rules.code"
          placeholder="请输入验证码"
          v-model="user.code"
          class="mima"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
          <template #button>
            <!-- <van-button plain type="info" @click="btnCode"
              >获取验证码</van-button> -->
            <van-button
              class="codebtn"
              type="mini"
              plain
              @click.stop.prevent="btnCode"
              :disabled="time !== 30"
            >
              <span v-if="time === 30">获取验证码</span>
              <span v-else>{{ time }}s后重试</span>
            </van-button>
          </template>
        </van-field>
      </van-cell>
      <p class="deal">
        登录既同意<span>《用户使用协议》</span>和<span>《隐私协议》</span>
      </p>
      <!-- 登录按钮 -->
      <div class="loginbtn">
        <van-button
          type="danger"
          size="large"
          :loading="isLoading"
          loading-type="spinner"
          round
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCode, login } from '@/api/api.js'
import { setLocal, getLocal } from '@/utils/local.js'

export default {
  data () {
    return {
      // 用户
      user: {
        mobile: '15016624915',
        code: ''
      },
      // 存储用户信息
      userInfo: '',
      // 倒计时时间
      time: 30,
      rules: {
        code: [
          { required: true, trigger: 'onBlur' },
          { pattern: /^\d{4}$/, message: '请输入4位验证码', trigger: 'onBlur' }
        ],
        mobile: [
          { required: true, trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入11位手机号码',
            trigger: 'onBlur'
          }
        ]
      },
      // 设置登录按钮的加载状态
      isLoading: false
    }
  },
  methods: {
    getCed () {
      if (getLocal('heimamm_mobile_token')) {
        this.$router.push('/my')
      }
    },
    // 获取验证码方法
    async btnCode () {
      const res = await getCode({
        mobile: this.user.mobile
      })
      // console.log(res)
      // 弹出响应成功的验证码
      this.$toast.success(`${res.data}`)
      // 把验证码传到输入框
      this.$nextTick(() => {
        this.user.code = res.data
        this.tiemCode()
      })
    },
    // 登陆方法
    async onSubmit () {
      // 判断是否正在发请求
      if (this.isLoading === true) {
        return
      }
      try {
        // 提交请求前加载数据改为true
        this.isLoading = true
        // 发送登陆请求
        const res = await login(this.user)
        // console.log('22222', res)
        // 发送请求后加载数据改为false
        this.isLoading = false
        // token保存到本地
        setLocal(res.data.jwt)

        // 登录提醒
        this.$toast.success(res.message)
        this.$store.state.userInfo = res.data

        // 跳转到我的页面
        this.$router.push('/my')
      } catch (error) {
        this.isLoading = false
        this.$toast.fail('手机号或验证码有误')
      }
    },
    // 计算器方法
    tiemCode () {
      this.time--
      const tiemID = setInterval(() => {
        this.time--
        if (this.time === 0) {
          clearInterval(tiemID)
          this.time = 30
        }
      }, 1000)
    }
  },
  created () {
    this.getCed()
  }
}
</script>

<style lang="less" scoped>
.login {
  // /deep/ .icon_nav_back {
  //   color: #000;
  //   font-size: 24px;
  // }
  .iconbtn_nav_back {
    font-size: 50px;
    margin-left: -10px;
  }
  /deep/h2 {
    padding: 30px 0px 55px 15px;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-cell {
    font-size: 16px;
    .mima {
      height: 50px;
      line-height: 50px;
    }
  }
  .van-button {
    border: #fff solid 0;
    font-size: 16px;
    // padding: 5px;
    border-left: #ccc solid 1px;
  }
  p {
    font-size: 12px;
    margin-left: 15px;
    span {
      color: #1989fa;
    }
  }
}
.loginbtn {
  padding: 20px;
}
</style>
